<template>
  <div>
    <nav-bar class="nav_bar">
      <img @click="$router.back()" class="left" slot="left" src="../../assets/img/navbar/ic_title_close.png" alt="">
      <span slot="center">代充管理</span>
    </nav-bar>
    <div class="content">
      <ul class="tab">
        <li 
          v-for="(item, index) in tabList" 
          :key="index" 
          class="item_list"
          @click="currentIndex = index">
          <img :src="currentIndex === index? item.img_on: item.img_off"/>
          <span :style="{color: currentIndex === index? '#F7FF00':'#fff'}">{{item.title}}</span>
        </li>
      </ul>
      <div class="tabs">
        <recharge-player v-show="currentIndex === 0"/>
        <recharge-money 
          v-show="currentIndex === 1" 
          @show-click="showClick"
          @pay-url-code="payUrlCode"/>
        <recharge-balance v-show="currentIndex === 2"/>
      </div>
    </div>
    <van-overlay v-show="show" @click="show = !show">
        <p class="text_tips">此为人工加币转账，转账后联系对接!</p>
        <p class="text_tips" style="color: #ffff00">转账备注请填写渠道id</p>
        <van-image width="500" :src="imgData" />
        <van-button round size="large" hairline class="save_btn" @click="savePic"
          >保存图片</van-button>
    </van-overlay>
    <van-overlay :show="payShow" @click="payClose" class="pay_code">
      <h3>扫一扫付款<span>{{amount}}</span>元</h3>
      <div class="code_bg">
        <div class="code_box">
          <div class="code" ref="qrcode" id="qrcodeCode"></div>
        </div>
        <div class="icon_box">
          <img src="../../assets/img/withdrawal/icon_sweep.png" alt="">
          <span>
            <p>打开手机<span v-if="pay_type === 2">支付宝</span><span v-else>微信</span></p>
            <p>扫一扫继续支付</p>
          </span>
        </div>
      </div>
      <van-button class="code_close" round>关闭</van-button>
    </van-overlay>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import mixinScrollAll from '../../mixins/mixinScrollAll'
import RechargeBalance from './recharge/RechargeBalance.vue'
import RechargeMoney from './recharge/RechargeMoney.vue'
import RechargePlayer from './recharge/RechargePlayer.vue'
import QRCode from 'qrcodejs2'
import { getRedeemVoucher } from '../../network/home'
export default {
  mixins: [mixinScrollAll],
  components: {
    NavBar,
    RechargePlayer,
    RechargeMoney,
    RechargeBalance,
  },
  data() {
    return {
      tabList: [{
        title: '玩家加币',
        img_on: require('../../assets/img/charge/icon_01_on.png'),
        img_off: require('../../assets/img/charge/icon_01_off.png'),
      },{
        title: '喵币',
        img_on: require('../../assets/img/charge/icon_02_on.png'),
        img_off: require('../../assets/img/charge/icon_02_off.png'),
      },{
        title: '账号记录',
        img_on: require('../../assets/img/charge/icon_03_on.png'),
        img_off: require('../../assets/img/charge/icon_03_off.png'),
      }],
      currentIndex: 0,
      imgData: 'https://p1.277sy.com/android_tools/gh_ali.png',
      show: false,
      payShow: false,
      is_pc: 1,
      pay_url: '',
      qrcode: null,
      amount: null,
      pay_type: null,
    }
  },
  methods: {
    payUrlCode(amount, paytype) {
      this.amount = amount
      this.pay_type = paytype
      getRedeemVoucher(amount, paytype, this.is_pc).then(res => {
        if(res.state === 'ok') {
          this.payShow = true
          if (paytype === 2) {
            this.pay_url = res.data.pay_url_2
          }else if (paytype === 3) {
            this.pay_url = res.data.pay_url
          }
          this.transQrcode()
          console.log(res);
        }else if (res.state === 'err') {
          if (res.msg === 'no_login') {
            this.$router.replace('/login')
          } else {
            this.$toast(res.msg)
          }
        }
      })
    },
    transQrcode(){
      this.qrcode = new QRCode('qrcodeCode',{
        width: 300,
        height:300,
        text: this.pay_url,
      })
    },
    payClose() {
      console.log('close');
      this.qrcode.clear()
      this.payShow = false
    },
   showClick(val) {
     console.log(val);
      this.show = true;
      if (val === 3) {
        this.imgData = 'https://p1.277sy.com/android_tools/gh_wx.png'
      }else if (val === 2) {
        this.imgData = 'https://p1.277sy.com/android_tools/gh_ali.png'
      }
    },
    savePic(Url) {
      this.show = false;
      Url = this.imgData; //图片路径，也可以传值进来
      var triggerEvent = "touchstart"; //指定下载方式
      var blob = new Blob([""], { type: "application/octet-stream" }); //二进制大型对象blob
      var url = URL.createObjectURL(blob); //创建一个字符串路径空位
      var a = document.createElement("a"); //创建一个 a 标签
      a.href = Url; //把路径赋到a标签的href上
      //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
      a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, "$2").split("?")[0];
      /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）
	    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/
      var e = new MouseEvent(
        "click",
        (true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null)
      );
      //派遣后，它将不再执行任何操作。执行保存到本地
      a.dispatchEvent(e);
      //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）
      URL.revokeObjectURL(url);
    },
  },
}
</script>

<style lang="less" scoped>
.nav_bar {
  background: #fff;
  .left {
    width: 44px;
    height: 44px;
  }
}

.content {
  margin-top: 88px;
}

.tab {
  padding-top: 30px;
  width: 750px;
  height: 316px;
  background: linear-gradient(317deg,#ff5641 0%, #ffa939 97%);
  display: flex;
  justify-content: space-around;
  .item_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 130px;
    height: 155px;
    img {
      width: 118px;
      height: 118px;
    }
    span {
      font-size: 30px;
    }
  }
}

.tabs {
  margin: -126px auto 0;
}

.save_btn {
  margin: 0 auto;
  display: block;
  margin-top: 20px;
  width: 300px;
  height: 60px;
}

.text_tips {
  color: #fff;
  font-size: 36px;
  text-align: center;
  margin: 10px 0;
}

.van-overlay {
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.code_box {
  width: 300px;
  height: 300px;
  background: pink;
  position: relative;
  overflow: hidden;
}

.code_box .code {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pay_code {
  h3 {
    color: #fff;
    font-size: 36px;
    line-height: 100px;
    span {
      color: #ffff00;
    }
  }
}

.code_bg {
  padding: 25px 25px 0;
  width: 300px;
  height: 420px;
  background: #fff;
  .icon_box {
    margin-top: 30px;
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50px;
      height: 50px;
      margin-right: 30px;
    }
    span {
      font-size: 24px;
      color: #333;
    }
  }
}

.code_close {
  margin-top: 50px;
  width: 300px;
  height: 60px;
  font-size: 24px;
}
</style>